/*
 * @Author: 史许荣
 * @Date: 2022-08-01 10:04:03
 * @LastEditors: 史许荣
 * @LastEditTime: 2022-08-04 15:17:55
 * @Description: file content
 * @FilePath: \react-three-fiber-new\src\App.js
 */
import * as THREE from 'three'
import { Suspense, useEffect, useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { Preload, Environment, OrbitControls } from '@react-three/drei'


import Tags from './Tags'
import HandT from './HandT'
import SAFE from './SAFE'
import Cctv from './Cctv'
import Particles from './Particles'
import Jing from './Jing'
import Frames from './Frames'
import HeatMap from './HeatMap'
export default function App({ images }) {
  const mouse = useRef([0, 0])

  const [type, setType] = useState(true);
  const [id, setId] = useState(0);
  const texture = new THREE.TextureLoader().load('/worldBg.png');
  return (
    <div className='allBg'>

      <div id="heatmap" style={{ width: '400px', height: '400px', display: 'none' }}></div>
      <div id="greymap" style={{ width: '400px', height: '400px', display: 'none' }}></div>
      <img src={'/bg.jpg'} />
      <Canvas transparent={true} opacity={0} gl={{ alpha: true, antialias: true }} dpr={[1, 1.5]} camera={{ fov: 70, position: [0, 30, 40] }}>
        <Environment files="/potsdamer_platz_1k.hdr" />
        <Suspense fallback={null}>

          <Preload all />
          <mesh
            position={[0, 0.8, 0]}
            rotation={[-Math.PI / 2, 0, 0]}>
            <planeGeometry args={[40, 40]} />
            <meshBasicMaterial map={texture} side={THREE.DoubleSide} transparent={true} />
          </mesh>
          <Frames type={type} setType={setType} id={id} setId={setId} />
          <Jing position={[0, -4, 0]} />

          <Particles count={800} mouse={mouse} />
        </Suspense>


        {id == 4 && <group position={[0, 6, 0]}>
          <Tags name={'3D打印'} position={[-1.5, 0, -8]} />
          <Tags name={'自动包装发货'} position={[-9, 0, 0]} />
          <Tags name={'CNC机器人'} position={[8, 0, 0]} />
          <Tags name={'热成型'} position={[-1.5, 0, 8]} />
        </group>}

        {id == 0 && <group position={[0, 5, 0]}>
          <HandT value={29.4} type="H" position={[3, 0, -9]} />
          <HandT value={97.2} type="T" position={[-3, 0, -9]} />
        </group>}

        {id == 1 && <group position={[-10, 4, 0]}>
          <Cctv name={'监控1'} position={[0, 0, -3]} />
          <Cctv name={'监控2'} position={[0, 0, 4]} />
        </group>}

        {id == 2 && <group position={[0, 2.5, 8]}>

          <SAFE type={'error'} position={[0, 0, 1]} />
          <SAFE type={'info'} position={[4, 0, 3.5]} />
          <SAFE type={'info'} position={[-2.5, 0, -2]} />
          <SAFE type={'info'} position={[-2.5, 0, 3.5]} />
          <HeatMap position={[-0.5, -0.5, 0.5]} />
        </group>}

        {id == 3 && <group position={[10, 4, 0]}>
          <Cctv name={'监控1'} position={[0, 0, -3]} />
          <Cctv name={'监控2'} position={[0, 0, 4]} />
        </group>}
        <OrbitControls />
      </Canvas>


    </div>
  )
}
